<script lang="ts" setup>
import { ref } from 'vue';

const props = defineProps({
  status: {
    type: Number,
    default: 0,
  },
  id: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits(['select']);
const visible = ref(false);

function onPublish() {
  visible.value = true;
}

function onPublishOk() {
  emit('select', {
    id: props.id,
    status: props.status === 0 ? 1 : 0,
  });
  visible.value = false;
}

</script>

<template>
  <el-tooltip
    effect="dark"
    content="发布"
    placement="bottom"
    :enterable="false"
  >
    <el-icon
      class="icon-color"
      @click="onPublish"
    >
      <Position />
    </el-icon>
  </el-tooltip>
  <el-dialog
    v-model="visible"
    :title="props.status === 0 ? '发布' : '取消发布'"
    width="400px"
  >
    <div class="status">
      <div>
        <span :class="props.status === 0 ? '' : 'active'"></span>
        <div v-if="props.status === 0">未发布</div>
        <div v-else>已发布</div>
      </div>
      <div>查看发布教程</div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          @click="onPublishOk"
        >
          {{ props.status === 0 ? '发布大屏' : '取消发布' }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.icon-color {
  cursor: pointer;
  margin-right: 18px;
  font-size: 18px;

  &:hover {
    color: #2681ff;
  }
}
.dialog-footer {
  display: flex;
  justify-content: center;

  .el-button {
    width: 320px;
    padding: 8px 30px;
    background-color: #2681ff;
  }
}

.status {
  display: flex;
  justify-content: space-between;
  align-items: center;

  &>div:nth-child(1) {
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #bcc9d4;

    &>span {
      background-color: #576369;
      margin-right: 5px;
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 5px;
    }

    .active {
      background-color: #1fadf1;
    }
  }

  &>div:nth-child(2) {
    color: #2681ff;
    cursor: pointer;
  }
}

</style>
